<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日微醺吧 - 特调结果</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="common.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f7f7f7;
            overflow: hidden;
            position: fixed;
            width: 100%;
            height: 100%;
        }
        
        .result-header {
            background: linear-gradient(135deg, #36d1dc, #5b86e5);
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 0 0 20px 20px;
        }
        
        .cocktail-image {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin: 0 auto;
            transform: translateY(-10px);
            margin-top: 30px;
        }
        
        .info-section {
            background-color: white;
            border-radius: 15px;
            padding: 15px;
            margin-bottom: 15px;
        }
        
        .section-title {
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            font-size: 16px;
        }
        
        .section-title i {
            margin-right: 8px;
            color: #5b86e5;
        }
        
        .section-content {
            color: #666;
            font-size: 14px;
            line-height: 1.5;
        }
        
        .ingredient {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }
        
        .ingredient-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #5b86e5;
            margin-right: 8px;
        }
        
        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 20px;
            border-radius: 30px;
            font-weight: 500;
            font-size: 14px;
            margin: 0 5px;
        }
        
        .btn-outline {
            border: 1px solid #5b86e5;
            color: #5b86e5;
        }
        
        .btn-filled {
            background-color: #5b86e5;
            color: white;
        }
    </style>
</head>
<body>
    <!-- 状态栏 -->
    <div class="status-bar">
        <h1 class="text-lg font-medium">特调结果</h1>
    </div>
    
    <!-- 内容区域 -->
    <div class="content-area">
        <!-- 鸡尾酒名称与顶部部分 -->
        <div class="result-header">
            <h1 class="text-2xl font-bold mb-1">欢悦气泡</h1>
            <p class="text-sm opacity-90">专属于你的夏日清爽特调</p>
        </div>
        
        <!-- 鸡尾酒图片 -->
        <div class="flex justify-center">
            <img src="https://images.unsplash.com/photo-1551024709-8f23befc6f87?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" 
                 alt="欢悦气泡" class="cocktail-image">
        </div>
        
        <!-- 滚动内容区域 -->
        <div class="px-4 pb-20" style="margin-top: 0px;">
            <!-- 配方详情 -->
            <div class="info-section">
                <h2 class="section-title">
                    <i class="fas fa-list-ul"></i>配方详情
                </h2>
                <div class="section-content">
                    <div class="ingredient">
                        <div class="ingredient-dot"></div>
                        <div>意大利普罗塞克起泡酒 (100ml)</div>
                    </div>
                    <div class="ingredient">
                        <div class="ingredient-dot"></div>
                        <div>柠檬汁 (15ml)</div>
                    </div>
                    <div class="ingredient">
                        <div class="ingredient-dot"></div>
                        <div>薄荷叶碎 (5g)</div>
                    </div>
                    <div class="ingredient">
                        <div class="ingredient-dot"></div>
                        <div>少量苏打水 (10ml)</div>
                    </div>
                    <div class="ingredient">
                        <div class="ingredient-dot"></div>
                        <div>橙片装饰 + 彩色纸风车</div>
                    </div>
                </div>
            </div>
            
            <!-- 口感描述 -->
            <div class="info-section">
                <h2 class="section-title">
                    <i class="fas fa-wine-glass-alt"></i>口感描述
                </h2>
                <div class="section-content">
                    仿佛夏日微风拂过舌尖，柠檬的酸甜如同欢快的音符，薄荷叶则带来丝丝清凉，口感轻盈如舞。
                </div>
            </div>
            
            <!-- 饮用指南 -->
            <div class="info-section">
                <h2 class="section-title">
                    <i class="fas fa-book-open"></i>饮用指南
                </h2>
                <div class="section-content">
                    冷藏后饮用，用高脚杯，轻轻搅拌，感受气泡在舌尖跳跃。
                </div>
            </div>
            
            <!-- 健康提醒 -->
            <div class="info-section">
                <h2 class="section-title">
                    <i class="fas fa-heartbeat"></i>健康提醒
                </h2>
                <div class="section-content">
                    约合2.5标准杯 | 无酒精替代可选用气泡水+柠檬汁 | 适合任何年龄段饮用
                </div>
            </div>
            
            <!-- 理想场景 -->
            <div class="info-section">
                <h2 class="section-title">
                    <i class="fas fa-map-marker-alt"></i>理想场景
                </h2>
                <div class="section-content">
                    户外野餐 | 搭配彩色气球与鲜花 | 背景音乐为欢快的流行曲
                </div>
            </div>
            
            <!-- 酒品故事 -->
            <div class="info-section">
                <h2 class="section-title">
                    <i class="fas fa-history"></i>酒品故事
                </h2>
                <div class="section-content">
                    起泡酒起源于意大利，以其丰富的气泡和清爽口感而闻名。在欢乐的时刻，起泡酒就像生活中的小惊喜，带来无尽的愉悦。
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="flex justify-center my-6">
                <button class="action-btn btn-outline mr-2">
                    <i class="fas fa-heart mr-1"></i>收藏
                </button>
                <button class="action-btn btn-filled ml-2">
                    <i class="fas fa-share-alt mr-1"></i>分享
                </button>
            </div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <div class="tab-item">
            <i class="fas fa-home tab-icon"></i>
            <span>首页</span>
        </div>
        <div class="tab-item active">
            <i class="fas fa-glass-cheers tab-icon"></i>
            <span>制作特调</span>
        </div>
        <div class="tab-item">
            <i class="fas fa-user tab-icon"></i>
            <span>我的</span>
        </div>
    </div>
</body>
</html> 